<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
    <div>
        <p id="parEle">我是父元素    <span id="sonEle">我是子元素</span></p>
    </div>
</body>
</html>
<script type="text/javascript">
var sonEle = document.getElementById('sonEle');
var parEle = document.getElementById('parEle');

parEle.addEventListener('click', function () {
    alert('父级 冒泡');
}, false);
parEle.addEventListener('click', function () {
    alert('父级 捕获');
}, true);

sonEle.addEventListener('click', function () {
    alert('子级冒泡');
}, false);
sonEle.addEventListener('click', function () {
    alert('子级捕获');
}, true);


// 事件流三阶段  捕获  目标  冒泡
// 捕获是从外到内  冒泡是从内到外
//当点击子元素 可以把捕获和冒泡分开来理解，捕获在冒泡之前

//所以点击子元素，先 父级捕获 -》 子级冒泡 -》 子级捕获 -》 父级冒泡

// ps 在触发的目标元素上不区分冒泡还是捕获，按绑定的顺序来执行 ！！！！

parEle.addEventListener('click', function () {
    alert('父级 冒泡');
}, false);
parEle.addEventListener('click', function () {
    alert('父级 捕获');
}, true);

sonEle.addEventListener('click', function () {
    alert('子级捕获');
}, true);

sonEle.addEventListener('click', function () {
    alert('子级冒泡');
}, false);

// 此时 点击 子级元素  父级捕获 -》 子级捕获 -》 子级冒泡 -》 父级冒泡

</script>